import { styled } from '@mui/material/styles'
import Icon from '../../../../assets/profile.svg'
import { Typography } from '@mui/material'
import { Link } from 'react-router-dom'
import { useAppSelector } from '../../../../store/hooks'
import { selectUser } from '../../../../store/reducers/selectors'

const StyledContainer = styled(Link)(() => ({
	display: 'flex',
	flexDirection: 'row',
	width: 'auto',
	height: 'auto',
	position: 'relative',
	textDecoration: 'none',
	gap: '10px',
}))

const StyledTypography = styled(Typography)(() => ({
	width: 'auto',
	display: 'flex',
	justifyContent: 'center',
	fontSize: '18px',
	fontWeight: '600',
	color: '#1A1A1A',
}))

const ProfileButton = () => {
	const user = useAppSelector(selectUser)

	return (
		<StyledContainer to='profile'>
			<Icon />
			<StyledTypography>{user?.name}</StyledTypography>
		</StyledContainer>
	)
}

export default ProfileButton
